<template>
    <div>


        <van-row>
            <van-col span="24">
                <!-- 这里的onClick就是点击tab栏切换不同的页面 -->
                <van-tabs @click="onClick" sticky title-active-color="#E32DAB" color="#E32DAB" :line-width="100"
                          :line-height="2">


                    <!--          v-for就是遍历下面data()里面的categories
                                 title就是下标为几的显示name-->
                    <van-tab v-for="index in categories.length" :title="categories[index-1].name" class="tab">

                        <!-- 这里遍历的是phones -->
                        <van-card v-for="(item,index) in phones"
                                  :price="item.price"
                                  :desc="item.desc"
                                  :title="item.title"
                                  :thumb="item.thumb"
                        >
                            <template #tags>
                                <van-tag v-for="tag in item.tag" color="#f2826a" style="margin-left: 5px;">
                                    {{tag.name}}
                                </van-tag>
                            </template>
                            <template #footer>
                                <van-button round type="info" size="mini" @click="buy(index)">购买</van-button>
                            </template>
                        </van-card>


                    </van-tab>


                </van-tabs>
            </van-col>
        </van-row>


        <!--当点击购买弹出的sku页面-->

        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :hide-stock="sku.hide_stock"
                @buy-clicked="onBuyClicked"><!-- 这个按钮是（当点击购买按钮，提交数据） -->
            >
            <template #sku-actions="props">
                <div class="van-sku-actions">


                    <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
                    <van-button
                            square
                            size="large"
                            type="danger"
                            @click="props.skuEventBus.$emit('sku:buy')"
                    >
                        购买
                    </van-button>
                </div>
            </template>
        </van-sku>


    </div>
</template>


<script>
    import {
        Toast,
        PullRefresh,
        Swipe,
        SwipeItem
    } from 'vant';


    export default {
        comments: {
            [PullRefresh.name]: PullRefresh,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        },
        data() {
            return {
                categories: '',//tab标签选项
                phones: '',//默认第一个页面显示的数据
                show: false,//sku页面默认关闭，点击才打开
                sku: '',
                goods: ''
            }
        },




//从后端拿取数据
        created() {
            const _this = this
            axios.get('http://localhost:8181/phone/index').then(function (resp) {
                _this.phones = resp.data.data.phones
                _this.categories = resp.data.data.categories
            })
        },




        //这里面都是单击事件
        methods: {

            //当点击tab选项的时候切换页面，index就是点击选项的下标
            onClick(index) {
                const _this = this
                axios.get('http://localhost:8181/phone/findByCategoryType/'+this.categories[index].type).then(function (resp) {
                    _this.phones = resp.data.data
                })
            },

            //当点击购买弹出sku的画面
            buy(index) {
                this.show = true
                const _this = this
                axios.get('http://localhost:8181/phone/findSpecsByPhoneId/'+this.phones[index].id).then(function (resp) {
                    _this.goods = resp.data.data.goods
                    _this.sku = resp.data.data.sku
                })
            },

            //当点击了购买，会把钱还有规格还有很多都要传递到另外一个页面
            onBuyClicked(item) {//这个item里面就包含了用户购买的信息
                this.$store.state.specsId = item.selectedSkuComb.s1//取出那个规格的id赋值给store包里面的index.js
                this.$store.state.quantity = item.selectedNum//取出用户选择的数量赋值给store包里面的index.js
                this.$router.push('/addressList')//这是下一个页面路由的url地址
            }

        }


    }


</script>


